<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>插槽</title>
</head>
<body>
  
  <div id="app">
    <div>
      <!-- <child mes='Vue' @btn='temp'></child> -->
      <!-- <temp>
        <p slot="header">header</p>
        <p slot="body">body</p>
        <p slot="footer">footer</p>
      </temp> -->
      <component :is='type'></component>
      <button @click='toggle'>切换</button>
    </div>
    
  </div>
  <script src="./js/vue.js"></script>
  <script>
    Vue.prototype.bus = new Vue()
    Vue.component('child', {
      props: {
        mes: {
          default: "hello Vue"
        }
      },
      template: `<div @click="clibtn">组件{{mes}}</div>`,
      methods: {
        clibtn() {
          // console.log(this);
          this.$emit('btn', this.mes);
          this.bus.$emit('click', this.mes);
        }
      }
    })
    
    Vue.component('temp', {
      props:['mes'],
      data: function() {
        return {
          val: 'temp'
        }
      },
      mounted: function(){
        var _this = this;
        this.bus.$on('click', function(res) {
          console.log("兄弟之间传值", res);
          _this.val = res;
        })
      },
      template: `<div>
                    这是{{val}}组件
                    <slot name='header'></slot>
                    <slot name='body'></slot>
                    <slot name='footer'></slot>
                    <slot mes="这是静态传值"></slot>
                  </div>`
    })

    var app = new Vue({
      el: '#app',
      data: {
        type: 'child'
      },
      methods: {
        temp(res) {
          console.log('子传父: ', res);
        },
        toggle() {
          this.type = this.type === 'child' ? 'temp' : 'child'
        }
      },
      // 更新时触发
      mounted: function() {
        
      }
    })
  </script>
</body>
</html>